<template>
    <div class="border-rad-10 text-nowrap font-14">
        <el-dialog
            title="登录 / 注册"
            :width="dialogWidth"
            :visible.sync="dialogVisible"
            :close-on-click-modal="false"
            :before-close="cancelLoginDialog"
            :modal-append-to-body="false"
            :append-to-body="true"
        >
            <Lines h="1px" bg="#f2f3f5" />

            <div class="flex justify-center gap-40 mar-t-10">
                <div v-if="logoType === 0" class="">
                    <div class="mar-t-20 font-16 color-black">
                        <span>登录</span>
                    </div>

                    <div class="phone mar-t-20 bg-f2f3f5 pad-x-15 border-rad-3" >
                        <div class="flex h-40" >
                            <input
                                type="tel"
                                maxlength="11"
                                v-model="phone"
                                placeholder="请输入账号"
                                class="phone-input"
                                autocomplete="off"
                            />
                        </div>
                    </div>

                    <div class="captcha flex h-40 pad-x-15 bg-f2f3f5 mar-t-20 justify-between align-center border-rad-3" >
                        <input
                            :type="eyeState ? 'password' : 'text'"
                            maxlength="11"
                            v-model="password"
                            placeholder="请输入密码"
                            class="captcha-input"
                            autocomplete="off"
                        />

                        <div class="mar-t-3 mar-r-10 cur-pointer" @click="changeEyes(1)" >
                            <SvgIcons :iconClass="eyeState ? 'closeEye_icon' : 'openEye_icon'" class="font-18" />
                        </div>
                    </div>

                    <div class="captcha flex h-40 pad-l-15 pad-r-3 bg-f2f3f5 mar-t-20 justify-between align-center border-rad-3" >
                        <input
                            type="text"
                            maxlength="4"
                            v-model="captcha"
                            placeholder="请输入验证码"
                            class="captcha-input"
                            autocomplete="off"
                            @keyup.enter="handleLogin()"
                        />

                        <div v-loading="loading" v-if="loading" class="bg-f2f3f5 w-px-100"></div>
                        <div v-if="!loading" v-html="captchaSvg"></div>
                    </div>

                    <div class="flex justify-end mar-t-10" @click="handleGetCaptcha()">
                        <span class="changeCaptcha">看不清 ? 换一张</span>
                    </div>

                    <div class="flex justify-between gap-30 mar-t-30">
                        <div class="login flex-1" @click="handleChangeLoginMethod()">
                            <span>没有账号？去注册</span>
                        </div>

                        <div class="flex flex-1 border-rad-3 bg-1e80ff color-white justify-center h-40 align-center cur-pointer" @click="handleLogin()">
                            <span>登录</span>
                        </div>
                    </div>
                </div>

                <div v-else class="">
                    <div class="mar-t-20 font-16 color-black">
                        <span>注册</span>
                    </div>

                    <div class="captcha flex h-40 pad-x-15 bg-f2f3f5 mar-t-20 justify-between align-center border-rad-3" >
                        <input
                            type="text"
                            maxlength="11"
                            v-model="phone"
                            placeholder="请输入账号"
                            class="phone-input"
                            autocomplete="off"
                        />
                    </div>

                    <div class="captcha flex h-40 pad-x-15 bg-f2f3f5 mar-t-20 justify-between align-center border-rad-3" >
                        <input
                            :type="eyeState ? 'password' : 'text'"
                            maxlength="11"
                            v-model="password"
                            placeholder="请输入密码"
                            class="captcha-input"
                            autocomplete="off"
                        />

                        <div class="mar-t-3 mar-r-10 cur-pointer" @click="changeEyes(1)" >
                            <SvgIcons :iconClass="eyeState ? 'closeEye_icon' : 'openEye_icon'" class="font-18" />
                        </div>
                    </div>

                    <div class="captcha flex h-40 pad-x-15 bg-f2f3f5 mar-t-20 justify-between align-center border-rad-3" >
                        <input
                            :type="eyeConfirmState ? 'password' : 'text'"
                            maxlength="11"
                            v-model="confirm_code"
                            placeholder="请再次确认密码"
                            class="captcha-input"
                            autocomplete="off"
                        />

                        <div class="mar-t-3 mar-r-10 cur-pointer" @click="changeEyes(2)" >
                            <SvgIcons :iconClass="eyeConfirmState ? 'closeEye_icon' : 'openEye_icon'" class="font-18" />
                        </div>
                    </div>

                    <div class="flex justify-between gap-30 mar-t-30">
                        <div class="login flex-1" @click="handleRegister()">
                            <span>注册</span>
                        </div>

                        <div class="flex flex-1 border-rad-3 bg-1e80ff color-white justify-center h-40 align-center cur-pointer" @click="handleChangeLoginMethod()">
                            <span>已有账号？去登录</span>
                        </div>
                    </div>
                </div>

                <Lines class="login_right" h="auto" w="1px" bg="#f2f3f5" />

                <div class="login_right mar-t-20">
                    <span class="color-black font-16">扫码登录</span>

                    <div class="flex justify-center align-center w-px-150 h-150 mar-t-20 b-1-solid-f2f3f5 border-rad-3">
                        <span>二维码照片</span>
                    </div>

                    <div>
                        <div class="mar-t-20">
                            <span>打开</span>
                            <span class="color-1e80ff cur-pointer">三人行APP</span>
                        </div>

                        <div>
                            <span>点击"我-左上角扫一扫"登录</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="mar-t-40 flex justify-center">
                <div>注册登录即表示同意</div>
                <div class="color-1e80ff mar-x-5 cur-pointer">用户协议</div>
                <div>和</div>
                <div class="color-1e80ff mar-x-5 cur-pointer">隐私政策</div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import Lines from '@/components/Lines/index'
	import SvgIcons from '@/components/SvgIcons/index'
    import Utils from '@/utils/utils'

    export default {
        props: {
            // 控制弹窗是否显示
            dialogVisible: {
                type: Boolean,
                default: false
            },

            // 验证码
            captchaSvg: {
                type: String,
                default: ''
            },

            // 验证码Id
            captchaId: {
                type: String,
                default: ''
            },

            // 验证码加载中
            loading: {
                type: Boolean,
                default: false
            },
        },

        components: {
            Lines,
            SvgIcons,
        },

        data() {
            return {
                pageLoading: false, // 页面加载
                phone: '', // 手机号码
                captcha: '', // 验证码
                password: '', // 密码
                confirm_code: '', // 确认密码
                logoType: 0, // 0: 手机号登录，1: 账号密码登录，默认 手机号登录
                eyeState: true, // 密码可见状态，默认 不可见
                eyeConfirmState: true, // 确认密码可见状态，默认 不可见
                dialogWidth: '35%', // 默认宽度
            }
        },

        mounted() {
            this.setDialogWidth()
            window.addEventListener('resize', this.setDialogWidth)
        },
        beforeDestroy() {
            window.removeEventListener('resize', this.setDialogWidth)
        },

        methods: {
            // 弹窗宽度自适应
            setDialogWidth() {
                const screenWidth = window.innerWidth
                if (screenWidth <= 500) {
                    this.dialogWidth = '80%'
                } else if (screenWidth <= 800) {
                    this.dialogWidth = '75%'
                } else if (screenWidth <= 950) {
                    this.dialogWidth = '70%'
                } else if (screenWidth <= 1150) {
                    this.dialogWidth = '60%'
                } else if (screenWidth <= 1300) {
                    this.dialogWidth = '50%'
                } else if (screenWidth <= 1500) {
                    this.dialogWidth = '45%'
                } else if (screenWidth <= 1800) {
                    this.dialogWidth = '40%'
                } else {
                    this.dialogWidth = '35%'
                }
            },

            // 点击眼睛切换状态
            changeEyes(type) {
                if (type === 1) {
                    this.eyeState = !this.eyeState
                } else if (type === 2) {
                    this.eyeConfirmState = !this.eyeConfirmState
                }
            },

            // 置空登录信息
            clearLoginData() {
                this.phone = ''
                this.captcha = ''
                this.password = ''
                this.confirm_code = ''
            },

            // 切换登录方式（账号密码或者验证码登录）
            handleChangeLoginMethod() {
                this.logoType = this.logoType === 0 ? 1 : 0
                this.clearLoginData()
                this.eyeState = true
                this.eyeConfirmState = true
            },

            // 取消登录弹窗
            cancelLoginDialog() {
                this.clearLoginData()
                this.$emit('cancelLoginDialog')
            },

            // 点击登录/注册按钮校验手机号码和验证码
            handleLogin () {
                if (!this.phone) {
                    Utils.popUpMsg('error', '账号错误或不存在', 2000)
                    return
                } else if (this.phone.length < 2 || this.phone.length > 20) {
                    Utils.popUpMsg('error', '账号长度在2-20个字符之间', 2000)
                    return
                } else if (!this.password) {
                    Utils.popUpMsg('error', '请输入密码', 2000)
                    return
                } else if (this.password.length < 5 || this.password.length > 20) {
                    Utils.popUpMsg('error', '密码长度在5-20个字符之间', 2000)
                    return
                } else if (!this.captcha) {
                    Utils.popUpMsg('error', '请输入验证码', 2000)
                    return
                }
                this.pageLoading = Utils.loading('正在登录...')

                this.$store.dispatch('user/login', {
                    username: this.phone,
                    password: this.password,
                    captchaId: this.captchaId,
                    captchaText: this.captcha
                }).then(res => {
                    this.pageLoading.close()
                    Utils.popUpMsg('success', res.msg, 1000)
                    this.cancelLoginDialog()
                }).catch(err => {
                    this.pageLoading.close()
                    this.captcha = ''
                    this.$parent.findCaptcha()
                })
            },

            // 点击注册按钮校验密码和确认密码
            handleRegister () {
                if (!this.phone) {
                    Utils.popUpMsg('error', '请输入账号！', 3000)
                    return
                }

                if (!this.password) {
                    Utils.popUpMsg('error', '请输入密码！', 3000)
                    return
                }

                if (!this.confirm_code) {
                    Utils.popUpMsg('error', '请输入确认密码！', 3000)
                    return
                }

                if (this.password !== this.confirm_code) {
                    this.confirm_code = ''
                    Utils.popUpMsg('error', '两次密码输入不一致', 3000)
                    return
                }

                this.pageLoading = Utils.loading('正在注册...')
                this.$store.dispatch('user/register', { username: this.phone, password: this.password }).then(res => {
                    this.pageLoading.close()
                    Utils.popUpMsg('success', res.msg, 1000)
                    clearLoginData()
                }).catch(err => {
                    this.pageLoading.close()
                })
            },

            // 获取验证码
            handleGetCaptcha() {
                this.$parent.findCaptcha()
            }
        }
    }
</script>

<style lang="scss" scoped>
@media screen and (max-width: 750px) {
    .login_right {
        display: none;
    }
    
}
    .phone-input, .captcha-input {
        width: 70%;
        border: none;
        outline: none;
        background-color: #f2f3f5;
        font-size: 14px;
        color: black;
    }

    .phone-input::placeholder , .captcha-input::placeholder  {
        color: #cccccc;
    }

    .phone, .captcha {
        transition: border-color 0.2s;
        border: 1px solid #F2F3F5;
    }

    .phone:focus-within {
        border: 1px solid #1e80ff;
        box-sizing: border-box;
        background-color: #fff;
    }

    .captcha:focus-within {
        border: 1px solid #1e80ff;
        box-sizing: border-box;
        background-color: #fff;
    }

    .phone-input:focus, .captcha-input:focus {
        background-color: #fff;

    }

    .login {
        width: 170px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        background-color: #f4f9ff;
        color: #1e80ff;
        border: 1px solid #1e80ff;
        border-radius: 3px;
        cursor: pointer;
    }

    .login:hover {
        background-color: #e8f2ff;
    }

    .changeCaptcha:hover {
        cursor: pointer;
        color: #1e80ff;
    }

    ::v-deep(.el-loading-mask) {
        background: transparent !important;
    }
</style>